<template>
	<div class="left_content">
		<div class="up_c padding15">
			<img class="border_image1" src="../assets/img/border_image1.png" />
			<img class="border_image2" src="../assets/img/border_image2.png" />
			<img class="border_image3" src="../assets/img/border_image3.png" />
			<img class="border_image4" src="../assets/img/border_image4.png" />

			<div class="up_c_h">
				<div class="h_l">
					<div class="h_l_title">
						圈层人员数量
					</div>
					<div v-text="user_active.peopleNum" class="h_l_num main_fc">
					</div>
				</div>
				<div class="h_l">
					<div class="h_l_title">
						日活
					</div>
					<div v-text="user_active.activityFrequency" class="h_l_num main_fc">
					</div>
				</div>
			</div>
			<div class="center_c_wrap">
				<div id="main1" class="loudou"></div>
				<div class="center_c_right">
					<div class="center_c_right_item">
						<div class="center_c_right_item_l">
							报备登岛转化率：
						</div>
						<div v-text="user_active.reportLandPercent" class="center_c_right_item_r">
						</div>
					</div>
					<div class="center_c_right_item">
						<div class="center_c_right_item_l">
							登岛认筹转化率：
						</div>
						<div v-text="user_active.landRaisePercent" class="center_c_right_item_r">
						</div>
					</div>
					<div class="center_c_right_item">
						<div class="center_c_right_item_l">
							认筹成交转化率：
						</div>
						<div v-text="user_active.raiseTradePercent" class="center_c_right_item_r">
						</div>
					</div>
				</div>
			</div>
			<div class="down_c_wrap">
				<div class="title_wrap">
					<span class="t_text">活跃人员指数排行</span>
					<img src="../assets/img/title_img.png" />
				</div>
				<div class="c_content_wrap">
					<div v-for="item in user_active.indexLankingList" class="c_item">
						<div class="c_item_l">
							{{item.name}}
						</div>
						<div class="c_item_c">
							<div class="baifen" :style="{'width': item.baifen }"></div>
						</div>
						<div class="c_item_r">
							{{item.number}}
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="center_c padding15">
			<img class="border_image1" src="../assets/img/border_image1.png" />
			<img class="border_image2" src="../assets/img/border_image2.png" />
			<img class="border_image3" src="../assets/img/border_image3.png" />
			<img class="border_image4" src="../assets/img/border_image4.png" />
			<div class="title_wrap">
				<span class="t_text">热门搜索</span>
				<img src="../assets/img/title_img.png" />
			</div>
			<div class="c_content">
				<WordCloudChart id="echarts05" :width="width" :height="height"></WordCloudChart>
			</div>
		</div>
		<div class="center_c padding15">
			<img class="border_image1" src="../assets/img/border_image1.png" />
			<img class="border_image2" src="../assets/img/border_image2.png" />
			<img class="border_image3" src="../assets/img/border_image3.png" />
			<img class="border_image4" src="../assets/img/border_image4.png" />
			<div class="title_wrap">
				<span class="t_text">项目关注</span>
				<img src="../assets/img/title_img.png" />
			</div>
			<div class="guanzhu_wrap">
				<div class="guanzhu_item position1">
					<div v-text="project_focus.tradeAmount" class="money">
					</div>
					<div class="g_name main_fc">
						成交金额
					</div>
				</div>
				<div class="guanzhu_item position2">
					<div v-text="project_focus.tradeNum" class="money">
					</div>
					<div class="g_name main_fc">
						成交套数
					</div>
				</div>
				<div class="guanzhu_item position3">
					<div v-text="project_focus.saleNum" class="money">
					</div>
					<div class="g_name main_fc">
						销售人员
					</div>
				</div>
				<div class="guanzhu_item position4">
					<div v-text="project_focus.teamLeaderNum" class="money">
					</div>
					<div class="g_name main_fc">
						团队长
					</div>
				</div>
				<div class="guanzhu_item position5">
					<div v-text="project_focus.counselorNum" class="money">
					</div>
					<div class="g_name main_fc">
						顾问人员
					</div>
				</div>
				<div class="guanzhu_item position6">
					<div v-text="project_focus.settlementAmount" class="money">
						100万
					</div>
					<div class="g_name main_fc">
						结佣金额
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	var echarts = require('echarts');

	import WordCloudChart from "./WordCloudChart.vue";
	import { userActive, projectFocus } from '@/request/api'; // 导入我们的api接口
	export default {
		components: {
			WordCloudChart,
		},
		name: 'left_content',

		data() {
			return {
				width: '200px',
				height: '100px',
				user_active: {},
				project_focus: {},

				myChart: {},
				option: {
					// 弹框提示
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b} : {c}" // a对应系列名称,b对应数据项名称,c对应数据项值.
					},
					// 图例
					legend: {
						orient: 'vertical',
						data: ['报备', '登岛', '认筹', '成交'],
						left: 0,
						top: 50,
						textStyle: {
							color: '#fff'
						}
					},
					color: ['#325EC1', '#297AB1', '#35A3BE', '#3CE5E0'],
					series: [{
						name: '数据分析',
						type: 'funnel',
						top: '20',
						left: '40',
						width: '70%',
						height: '80%',
						maxSize: '100%',
						sort: 'descending',
						label: {
							normal: {
								position: 'outside', // 标签的位置:'left'漏斗图的左侧）、'right'(右侧)、'inside'(内部) [ default: 'outside' ]
								formatter: '{c}', // 标签文本
								textStyle: {
									color: '#fff'
								}
							},
							emphasis: { // 本系列每个数据项中特定的 tooltip 设定
								position: 'inside',
								formatter: '{b}: {c}'
							}
						},
						itemStyle: {
							normal: {
								opacity: 0.8, // 系列2图形透明度
								borderColor: '#fff', // 图形边框颜色
								borderWidth: 3 // 图形边框宽度大小
							}
						},
						data: [{
								value: 80,
								name: '报备'
							},
							{
								value: 50,
								name: '登岛'
							},
							{
								value: 30,
								name: '认筹'
							},
							{
								value: 16,
								name: '成交'
							}
						]
					}],
					//					series: [{
					//						type: 'pie',
					//						radius: '65%',
					//						left: '40',
					//						center: ['50%', '50%'],
					//						selectedMode: 'single',
					//						data: [{
					//								value: 548,
					//								name: '报备',
					//							},
					//							{
					//								value: 535,
					//								name: '登岛'
					//							},
					//							{
					//								value: 510,
					//								name: '认筹'
					//							},
					//							{
					//								value: 634,
					//								name: '成交'
					//							},
					//						],
					//						emphasis: {
					//							itemStyle: {
					//								shadowBlur: 10,
					//								shadowOffsetX: 0,
					//								shadowColor: 'rgba(0, 0, 0, 0.5)'
					//							}
					//						}
					//					}]
				}
			}
		},
		mounted() {
			this.initEcharts();
		},
		created() {
			let that = this;
			that.UserActive();
			that.ProjectFocus();
			setInterval(function() {
				that.UserActive();
				that.ProjectFocus();
			}, 1000 * 60 * 60 * 1);
		},
		methods: {
			UserActive() {
				let that = this;
				userActive({
					searchType: '',
					searchCity: ''
				}).then(res => {
					that.user_active = res.data;

//					that.option.series[0].data[0].value = that.user_active.reportNum;
//					that.option.series[0].data[1].value = that.user_active.landNum;
//					that.option.series[0].data[2].value = that.user_active.raiseNum;
//					that.option.series[0].data[3].value = that.user_active.tradeNum;
					//算百分比
					var jishu;
					var lankArr = that.user_active.indexLankingList;
					for(var i = 0; i < lankArr.length; i++) {
						//先转num
						lankArr[i].number = parseInt(lankArr[i].number);
						if(i == 0) {
							jishu = lankArr[i].number;
							lankArr[i].baifen = 1;
							lankArr[i].baifen *= 250;
							lankArr[i].baifen += 'px';
							continue;
						}
						lankArr[i].baifen = (lankArr[i].number) / jishu;
						lankArr[i].baifen *= 250;
						lankArr[i].baifen = parseInt(lankArr[i].baifen);
						lankArr[i].baifen += 'px';
					}
					console.log('that.user_active', that.user_active)
					// 绘制图表
					that.myChart.setOption(that.option);
				})
			},
			ProjectFocus() {
				let that = this;
				projectFocus({
					searchType: '',
					searchCity: ''
				}).then(res => {
					that.project_focus = res.data;
					that.project_focus.settlementAmount = parseInt(that.project_focus.settlementAmount);
				})
			},
			initEcharts() {
				let that = this;
				// 基于准备好的dom，初始化echarts实例
				that.myChart = echarts.init(document.getElementById('main1'));
				// 绘制图表
				that.myChart.setOption(that.option);
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.left_content {
		color: #FFFFFF;
		width: 540px;
	}
	
	.padding15 {
		padding: 15px;
	}
	
	.main_fc {
		color: #00BEFF;
	}
	
	.up_c {
		width: 100%;
		height: 430px;
		border: 1px solid #00BEFF;
		position: relative;
		box-shadow: 0 0 60px 0px #0080CA inset;
		box-sizing: border-box;
	}
	
	.up_c_h {
		display: flex;
		justify-content: space-around;
	}
	
	.up_c_h .h_l {
		display: flex;
		align-items: center;
		background: url("../assets/img/title_bottom.png") no-repeat bottom center;
		background-size: 100%;
		padding-bottom: 10px;
	}
	
	.up_c_h .h_l_title {
		font-size: 14px;
		margin-right: 40px;
	}
	
	.up_c_h .h_l_num {
		font-size: 30px;
	}
	
	.border_image1 {
		position: absolute;
		left: -1px;
		top: -1px;
	}
	
	.border_image2 {
		position: absolute;
		right: -1px;
		top: -1px;
	}
	
	.border_image3 {
		position: absolute;
		right: -1px;
		bottom: -1px;
	}
	
	.border_image4 {
		position: absolute;
		left: -1px;
		bottom: -1px;
	}
	
	.center_c {
		width: 100%;
		height: 195px;
		border: 1px solid #00BEFF;
		position: relative;
		box-shadow: 0 0 60px 0px #0080CA inset;
		box-sizing: border-box;
	}
	
	.title_wrap {
		color: #2BFAFF;
		font-size: 18px;
		display: flex;
		align-items: center;
	}
	
	.title_wrap .t_text {
		margin-right: 20px;
	}
	
	.guanzhu_wrap {
		position: relative;
	}
	
	.guanzhu_item {
		width: 132px;
		height: 60px;
		background: url("../assets/img/guanzhu_bg.png") no-repeat center center;
		background-size: 100% 100%;
		text-align: center;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}
	
	.guanzhu_item .money {
		font-size: 16px;
	}
	
	.guanzhu_item .g_name {
		font-size: 12px;
	}
	
	.position1 {
		position: absolute;
		left: 50%;
		margin-left: -50px;
		top: -20px;
	}
	
	.position2 {
		position: absolute;
		left: 50%;
		margin-left: -182px;
		top: 5px;
	}
	
	.position3 {
		position: absolute;
		left: 50%;
		margin-left: -182px;
		top: 65px;
	}
	
	.position4 {
		position: absolute;
		left: 50%;
		margin-left: -50px;
		top: 84px;
	}
	
	.position5 {
		position: absolute;
		left: 50%;
		margin-left: 82px;
		top: 65px;
	}
	
	.position6 {
		position: absolute;
		left: 50%;
		margin-left: 82px;
		top: 5px;
	}
	
	.loudou {
		width: 330px;
		height: 200px;
	}
	
	.center_c_wrap {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.center_c_right_item_l {
		font-size: 14px;
	}
	
	.center_c_right_item_r {
		font-size: 18px;
		color: #2BFAFF;
	}
	
	.c_item {
		display: flex;
		padding: 4px 0;
		font-size: 14px;
		justify-content: space-between;
		align-items: center;
	}
	
	.c_item_l {
		width: 150px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.c_item_c {
		width: 300px;
		/*height: 10px;*/
	}
	
	.baifen {
		width: 100%;
		height: 10px;
		background-image: linear-gradient(to right, #FF3C2A, #FFA53E);
		border-radius: 5px;
	}
	
	.center_c_right_item {
		display: flex;
		align-items: center;
		padding: 10px 0;
	}
</style>